<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <h1> {{msg}} </h1>
        <hr>
        <!-- 
            将 v-model 应用在我们自定义组件上相当于给其传递一个属性和一个修改方法
            model-value 属性
            @update:model-value 修改方法
        -->

        <com v-model="msg"></com>
    </div>
</body>

<template id="com">
    <div>
        <h1> Com 组件 {{modelValue}} </h1>
        <input type="text" v-model="value">
    </div>
</template>

<script>

    const com = {
        template: '#com',
        props: ['modelValue'],
        data() {
            return {

            }
        },
        computed: {
            value: {
                get() {
                    return this.modelValue
                },
                set(value) {
                    this.$emit('update:model-value', value)
                }
            }
        }
    }

    const app = {
        data() {
            return {
                msg: '你好'
            }
        },
        methods: {},
        components: {
            com
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>